<template>
  <!-- <top-header /> -->
  <div class="container">
    <div class="app_index">
      <!--顶部导航-->
      <div class="top">
        <div class="top_con">
          <el-space class="space_top" :size="2">
            <span class="sp_1" v-if="isLogin">Hi,{{ phone }}</span>
            <span v-if="isLogin">欢迎光临！</span>
            <span class="sp_2" @click="login" v-if="!isLogin">登录</span>
            <span class="sp_2" @click="logout" v-if="isLogin">退出</span>
            <!-- <span class="sp_3">成为会员</span> -->
            <span class="sp_4" @click="toMy">个人中心</span>
          </el-space>
        </div>
      </div>
      <div class="main">
        <div class="img_left" @click="toHome">
          <el-image src="./assets/logo.png" :fit="contain"></el-image>
        </div>
        <div class="search">
          <div class="inp">
            <input type="text" v-model="queryInfo" @keyup.enter="save" />
            <div class="right" @click="save">
              <span class="iconfont icon-sousuo"></span>
            </div>
          </div>
          <div class="cartOrder">
            <el-space class="left" :size="1" @click="toCart">
              <span class="iconfont icon-cart"></span>
              <span style="margin: 0 4px; font-size: 12px">购物车</span>
              <span class="num">{{ cartNum }}</span>
            </el-space>
            <!-- <div class="right" @click="toOrder">
            <span>我的订单</span>
          </div> -->
          </div>
        </div>
      </div>
    </div>
    <div class="main">
      <router-view />
    </div>
    <div class="bottom_index" v-if="$route.meta.isTrue">
      <p>Copyright 2004 - 2021 图书网. All Rights Reserved</p>
      <p>京ICP证041189号 | 出版物经营许可证 新出发京批字第直0673号 | 营许可证：JY11101050363440</p>
    </div>
    <el-backtop :bottom="100" :right="300">
      <div style="height: 100%; width: 100%; background-color: var(--el-bg-color-overlay); box-shadow: var(--el-box-shadow-lighter); text-align: center; line-height: 40px; color: #1989fa">UP</div>
    </el-backtop>
  </div>
  <Login v-model:visible="visible" @done="done" />
</template>

<script>
// import TopHeader from './components/top-header'
import Login from './components/login'
export default {
  name: 'app',
  components: {
    // TopHeader,
    Login,
  },
  data() {
    return {
      // 搜索内容
      queryInfo: null,
      visible: false,
      isLogin: false,
      phone: null,
      timer: null,
      cartNum: 0,
    }
  },
  created() {
    window.addEventListener('setItem', (e) => {
      this.setItemFn(e)
    })
    if (sessionStorage.getItem('isLogin') === 'true') {
      this.isLogin = true
    } else {
      this.isLogin = false
    }
    if (sessionStorage.getItem('phone')) {
      this.phone = sessionStorage.getItem('phone')
    }
    if (sessionStorage.getItem('token')) {
      this.$http
        .get('cart/count', {
          params: {
            numType: true,
            type: 'total',
          },
        })
        .then((res) => {
          this.cartNum = res.data.data.count
        })
    }
    /* 判断路由 */
    console.log(this.$route.path)
  },
  methods: {
    // 修改  sessionStorage中的数据时候触发
    setItemFn(e) {
      if (e.key === 'isLogin' && e.newValue === 'true') {
        this.isLogin = true
      } else if (e.key === 'isLogin' && e.newValue === 'false') {
        this.isLogin = false
      } else if (e.key === 'phone') {
        this.phone = e.newValue
      } else if (e.key === 'cartNum') {
        this.cartNum = e.newValue
      }
    },
    toHome() {
      let routeUrl = this.$router.resolve({
        path: '/',
      })
      window.open(routeUrl.href, '_blank')
    },
    toCart() {
      if (window.sessionStorage.getItem('isLogin') === 'true') {
        if (this.$route.path === '/cart') return
        let routeUrl = this.$router.resolve({
          path: '/cart',
        })
        window.open(routeUrl.href, '_blank')
      } else {
        this.$message.warning('请先登录')
        this.visible = true
      }
    },
    toMy() {
      if (window.sessionStorage.getItem('isLogin') === 'true') {
        if (this.$route.path === '/my') return
        let routeUrl = this.$router.resolve({
          path: '/my',
        })
        window.open(routeUrl.href, '_blank')
      } else {
        this.$message.warning('请先登录')
        this.visible = true
      }
    },
    toOrder() {
      if (window.sessionStorage.getItem('isLogin') === 'true') {
        if (this.$route.path === '/order') return
        let routeUrl = this.$router.resolve({
          path: '/order',
        })
        window.open(routeUrl.href, '_blank')
      } else {
        this.$message.warning('请先登录')
        this.visible = true
      }
    },
    login() {
      this.visible = true
    },
    logout() {
      window.sessionStorage.removeItem('token')
      window.sessionStorage.removeItem('phone')
      this.setSessionItem('cartNum', 0)
      this.setSessionItem('isLogin', false)
    },
    done() {
      this.visible = false
      if (window.sessionStorage.getItem('isLogin') === 'true') {
        this.isLogin = true
      } else {
        this.isLogin = false
      }
    },
    save() {
      console.log(this.queryInfo)
      let routeUrl = this.$router.resolve({
        path: '/cate',
        query: { keyword: this.queryInfo },
      })
      window.open(routeUrl.href, '_blank')
      this.queryInfo = ''
    },
  },
}
</script>

<style scoped lang="scss">
.container {
  height: 100%;
  position: relative;
}
.main {
  @include margin(1200px);
}
.app_index {
  width: 100%;
  border-bottom: 3px solid #ff2832;
  margin-bottom: 20px;
  padding-bottom: 10px;
  .top {
    height: 34px;
    width: 100%;
    background: #f9f9f9;
    border-bottom: 1px solid #f2f2f2;
    .top_con {
      @include margin(1200px);
      height: 100%;
      .space_top {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: flex-end;
        .sp_1 {
          color: #ff2832;
          // font-family: Arial;
          font-weight: bold;
          margin-right: 10px;
        }
        .sp_2 {
          color: #ff2832;
          cursor: pointer;
          margin: 0 10px;
        }
        .sp_3 {
          cursor: pointer;
          padding-right: 10px;
          border-right: 1px solid #e6e6e6;
          margin-right: 10px;
        }
        .sp_4 {
          cursor: pointer;
        }
      }
    }
  }
  .main {
    @include margin(1200px);
    display: flex;
    height: 100px;
    // align-items: center;
    .img_left {
      cursor: pointer;
      width: 342px;
      height: 77px;
      align-self: flex-start;
      .el-image {
        height: 100%;
        width: 100%;
      }
    }
    .search {
      height: 40px;
      width: 1122px;
      display: flex;
      justify-content: space-between;
      margin-top: 20px;
      .inp {
        height: 100%;
        width: 620px;
        border: 2px solid #ff2832;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        input {
          border: none;
          outline: none;
          height: 100%;
          width: 568px;
          text-indent: 6px;
          font-size: 16px;
        }
        .right {
          height: 100%;
          background: #ff2832;
          width: 48px;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          .icon-sousuo {
            font-size: 26px;
            color: #fff;
            font-weight: bold;
          }
        }
      }
      .cartOrder {
        width: 200px;
        display: flex;
        cursor: pointer;
        .left {
          width: 112px;
          height: 100%;
          background: #ff2832;
          border: 2px solid #ff2832;
          box-sizing: border-box;
          padding-left: 10px;
          .num {
            display: inline-block;
            width: 26px;
          }
          &:hover {
            background: #f6f6f6;
            border: 2px solid #dcdcdc;
            span {
              color: #ff2832;
            }
          }
          span {
            color: #fff;
            font-weight: bold;
            font-size: 14px;
          }
          .icon-cart {
            font-size: 20px;
          }
        }
        .right {
          width: 88px;
          height: 100%;
          text-align: center;
          line-height: 40px;
          background: #f6f6f6;
          border: 2px solid #dcdcdc;
          border-left: none;
          box-sizing: border-box;
          span {
            font: 14px/36px 'Microsoft Yahei';
            &:hover {
              color: #ff2832;
            }
          }
        }
      }
    }
  }
}
.login_link:hover {
  cursor: pointer;
}
.bottom_index {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 60px;
  border-top: 1px solid #eee;
  // position: absolute;
  margin-top: 60px;
  bottom: 0;
  padding-top: 10px;
  box-sizing: border-box;
  p {
    width: 100%;
    text-align: center;
    color: #8c8c8c;
    line-height: 20px;
  }
}
.toTop {
  height: 80px;
  width: 80px;
  border-radius: 50%;
}
</style>
